
<template>
 <div class="card">
   <div class="card-box" v-for="(item,index) in peoplelist">
     <div class="card-boximg">
       <img src="@/assets/images/touxiang.png" >
     </div>
    <div class="title">{{ item.roleName||'暂无' }}</div>
     <div class="name">
       <span>姓名：</span>
       <span>{{ item.nickName||'暂无' }}</span>
     </div>
     <div class="Tel">
       <span>电话：</span>
       <span>{{ item.phonenumber||'暂无' }}</span>
     </div>
<!--     <div>-->
<!--       <span>地址：DialogdetailsPage</span>-->
<!--       <span>我是谁我是谁我是谁我是谁我是谁我是谁我是谁detailsPage</span>-->
<!--     </div>-->
   </div>
<!--   <div class="card-box">-->
<!--     <div class="card-boximg">-->
<!--       <img src="@/assets/images/touxiang.png" >-->
<!--     </div>-->
<!--     <div class="title">科技管理员</div>-->
<!--     <div class="name">-->
<!--       <span>姓名：</span>-->
<!--       <span>我是谁</span>-->
<!--     </div>-->
<!--     <div class="Tel">-->
<!--       <span>电话：</span>-->
<!--       <span>13333303333</span>-->
<!--     </div>-->
<!--     <div>-->
<!--       <span>地址：</span>-->
<!--       <span>我是谁我是谁我是谁我是谁我是谁我是谁我是谁</span>-->
<!--     </div>-->
<!--   </div>-->
 </div>
</template>

<script setup lang="ts">
import {
  officeContact
} from './../../api/researcherNavApi/researcherNavApi'
import {onMounted} from "vue";
const peoplelist = ref([])
onMounted(()=>{
  officeContact({
  })
      .then((res)=>{
        peoplelist.value = res.data
      })
})
</script>
<style scoped lang="scss">
.card{
  display: flex;
  flex-wrap: wrap;
}
 .card-box{
   width: 366px;
   height: 200px;
   margin: 10px;
   padding: 25px;
   background-color: white;
   position: relative;
 }
 .title{
   font-size: 18px;
   font-weight: bolder;
 }
 .name{
   margin: 13px 0 8px 0;
 }
 .Tel{
   margin-bottom: 8px;
 }
 .card-boximg{
   position: absolute;
   top: 40px;
   left: 250px;
 }
</style>
